import React, { useState, useEffect } from 'react';
import { Button, Card, Steps } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { connect } from 'umi';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
import Step4 from './components/Step4';
import styles from './style.less';
import { queryBrand, queryStoreList } from './service';

const { Step } = Steps;

const CommodityCreatingSteps = ({ current, backTable, nowStep, state }) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [Brand, setBrand] = useState([]);
  const [Store, setStore] = useState([]);
  const [payload, setPayload] = useState();
  const [picture, setPicture] = useState();
  const [attrbutes, setAttrbutes] = useState();
  const getBrand = () => {
    queryBrand().then((res) => {
      if (res.code === 0) {
        const { data } = res;

        setBrand(data);
      }
      JSON.stringify(nowStep) == '{}'
        ? null
        : (setCurrentStep(nowStep.step), setPayload(nowStep.id));
    });
  };

  const getCurrentStepAndComponent = (current) => {
    return setCurrentStep(current);
  };
  const handleId = (payload) => {
    setPayload(payload);
  };
  const handleImage = (payload) => {
    setPicture(payload);
  };
  const handleAttr = (payload) => {
    setAttrbutes(payload);
  };
  useEffect(() => {
    getBrand();
  }, []);
  const componentShow = (currentStep) => {
    switch (currentStep) {
      case 0:
        return (
          <Step1
            dataSoure={Brand}
            CommodityId={payload}
            reviseState={state}
            defaultVal={nowStep}
            handleCurrent={getCurrentStepAndComponent}
            handleId={handleId}
          />
        );
      case 1:
        return (
          <Step2
            reviseState={state}
            handleCurrent={getCurrentStepAndComponent}
            CommodityId={payload}
            handleImage={handleImage}
          />
        );
      case 2:
        return (
          <Step3
            handleCurrent={getCurrentStepAndComponent}
            CommodityId={payload}
            reviseState={state}
            handleAttr={handleAttr}
          />
        );
      case 3:
        return (
          <Step4
            handleCurrent={getCurrentStepAndComponent}
            complete={backTable}
            CommodityId={payload}
            reviseState={state}
            handleImage={picture}
            handleAttr={attrbutes}
          />
        );
      default:
        break;
    }
  };
  return (
    <div className="Steps_Card">
      <div className="steps_head">
        <Button type="primary" style={{ width: 75 }} onClick={backTable}>
          取消
        </Button>
        <Steps current={currentStep} className={styles.steps}>
          <Step title="商品基础属性" />
          <Step title="商品图片" />
          <Step title="商品属性" />
          <Step title="商品品项" />
        </Steps>
      </div>
      {componentShow(currentStep)}
    </div>
  );
};

export default connect(({ commodityManagementAndCommodityCreatingSteps }) => ({
  current: commodityManagementAndCommodityCreatingSteps.current,
}))(CommodityCreatingSteps);
